@import '~css/echoes-variables.scss';

:host {
	$btn-color: whitesmoke;
	$btn-control-font-size:  1.5rem;
	$btn-control-padding:  1.5rem 1.7rem;
	$btn-control-primary-color: $brand-primary;
	$btn-primary-font-size: 3rem;

	@mixin button-style () {
		border: none;
		background: transparent;
		color: $btn-color;
		border-radius: 0;
		outline: none;
		font-size: $btn-control-font-size;
	}

	.btn {
		&.next,
		&.previous,
		&.repeat {
			padding: $btn-control-padding;
		}
	}
	.btn {
		@include button-style();
		vertical-align: middle;
    line-height: 0;
		
		&:hover {
			@include button-style();
		}

		&.pause {
			display: none;
		}

		&.play,
		&.pause {
			border: 0;
			color: $btn-control-primary-color;
			padding: 0.9rem 1.4rem;
			margin: 0;
			font-size: $btn-primary-font-size;
		}
	}

	.show-player {
		transform: translatey(0);
	}

	.player-controls {
		padding: .5rem;
	}
	&.yt-playing .player-controls {
		.play {
			display: none;
		}

		.pause {
			display: inline-block;
		}
	}

	&.yt-repeat-on .player-controls {
		.repeat {
			color: $btn-control-primary-color;
		}
	}
}
